<template>
  <div>
    <el-form
      style="width: 60%; margin: 0 auto"
      :model="form"
      ref="form"
      label-width="120px"
    >
      <el-form-item :label="$t('sys.is_enable')" prop="status">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item :label="$t('sys.service_type')" prop="mailType">
        <el-radio-group v-model="form.mailType">
          <el-radio-button label="IMAP">IMAP</el-radio-button>
          <el-radio-button label="SMTP">SMTP</el-radio-button>
          <el-radio-button label="POP3">POP3</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="$t('sys.is_enable_SSL')" prop="ssl">
        <el-switch v-model="form.ssl" />
      </el-form-item>

      <el-form-item
        :label="$t('sys.host_name')"
        prop="host"
        :rules="[
          { required: isUsed, message: $t('sys.host_name_not_null') },
          {
            pattern: HOST_REG,
            message: $t('sys.enter_valid_IP_or_domain_name'),
          },
        ]"
      >
        <el-input
          v-model="form.host"
          :maxlength="255"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('sys.port')"
        prop="port"
        :rules="[
          { required: isUsed, message: $t('sys.port_not_null') },
          { pattern: PORT_REG, message: $t('sys.enter_valid_port_0_65535') },
        ]"
      >
        <el-input
          v-model="form.port"
          :maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('sys.send_account')"
        prop="fromMail"
        :rules="[
          { required: isUsed, message: $t('sys.send_account_not_null') },
          { type: 'email', message: $t('sys.enter_valid_email') },
        ]"
      >
        <el-input
          v-model="form.fromMail"
          :maxlength="256"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item
        :label="$t('sys.username')"
        prop="userName"
        :rules="[{ required: isUsed, message: $t('sys.username_not_null') }]"
      >
        <el-input
          v-model="form.userName"
          :maxlength="256"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item :label="$t('sys.password')" prop="password">
        <el-input
          v-model="form.password"
          :maxlength="128"
          show-word-limit
          show-password
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleReset">{{ $t("sys.cancel") }}</el-button>
        <el-button
          :loading="confirmLoading"
          style="margin-left: 20px"
          @click="handleSubmit"
          type="primary"
          >{{ $t("sys.submit") }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { HOST_REG, PORT_REG } from "@/utils/reg";
import {
  getMsgMail,
  postMsgMail,
} from "@/apis/paas/MsgMailConfigController.js";
export default {
  name: "MailConfig",
  created() {
    this.init();
  },
  components: {},
  computed: {
    isUsed() {
      return !!this.form.status;
    },
  },
  data() {
    return {
      appId: this.$route.query.id,
      form: {},
      data: null,
      HOST_REG,
      PORT_REG,
      confirmLoading: false,
    };
  },
  methods: {
    init() {
      getMsgMail().then((res) => {
        this.data = res || {};
        this.$nextTick(() => {
          const {
            status,
            mailType,
            ssl,
            host,
            port,
            fromMail,
            userName,
            password,
          } = this.data;
          this.form = {
            status: !!status,
            mailType,
            ssl,
            host,
            port: port ? port.toString() : "",
            fromMail,
            userName,
            password,
          };
          this.$refs.form.clearValidate();
        });
      });
    },
    async handleSubmit() {
      try {
        await this.$refs.form.validate();
        const { id } = this.data;
        const {
          status,
          mailType,
          ssl,
          host,
          port,
          fromMail,
          userName,
          password,
        } = this.form;
        this.confirmLoading = true;
        postMsgMail({
          id,
          status: status ? 1 : 0,
          mailType,
          host: host ? host.trim() : "",
          port: port ? port.trim() : "",
          fromMail: fromMail ? fromMail.trim() : "",
          userName: userName ? userName.trim() : "",
          password: password ? password.trim() : "",
          ssl: ssl,
        })
          .then((res) => {
            this.$message.success(
              this.$t("sys.email_modified_notification_set_success")
            );
          })
          .finally(() => {
            this.confirmLoading = false;
          });
      } catch (error) {
        console.log(error);
      }
    },
    handleReset() {
      this.init();
    },
  },
};
</script>

<style scoped>
.radio-style {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>
